<template>
	<view class="page">
		<scroll-view scroll-y class="viewport">
			<view class="content">
				<!-- 商品信息 -->
				<view class="goods">
					<!-- 商品主图 -->
					<view class="preview">
						<swiper style="height: 100%;" circular @change="changeCurrentIndex">
							<swiper-item>
								<image class="swiper-image" mode="scaleToFill" :src="loadUrl + product.image" />
							</swiper-item>
						</swiper>
						<view class="indicator">
							<text class="current">1</text>
							<text class="split">/</text>
							<text class="total">1</text>
						</view>
					</view>

					<!-- 商品简介 -->
					<view class="meta">
						<view class="price">
							<text class="symbol">¥</text>
							<text class="number">{{ product.price / 100 }}</text>
						</view>
						<view class="name ellipsis">{{ product.title }}</view>
						<view class="desc">库存: {{ product.stock }}</view>
					</view>

					<!-- 操作面板 -->
					<view class="action">
						<view class="item arrow" @click="openPopup('', 'address')">
							<text class="label">送至</text>
							<text class="text ellipsis">请选择收获地址</text>
						</view>
						<view class="item arrow" @click="openPopup('', 'service')">
							<text class="label">服务</text>
							<text class="text ellipsis">无忧退 快速退款 免费包邮</text>
						</view>
					</view>
				</view>

				<!-- 评价组件 -->
				<view class="review-container">
					<view class="review-header">
						<text class="review-title">评价({{ totalReviews }})</text>
						<text class="review-more" @click="goToReviewPage">></text>
					</view>
					<view v-for="(review, index) in reviews" :key="index" class="review-item">
						<image class="avatar" :src="review.avatar" mode="aspectFill"></image>
						<view class="review-content">
							<view class="review-user">{{ review.username }}</view>
							<view class="review-stars">
								<text v-for="n in 5" :key="n"
									:class="['star', { 'filled': n <= review.rating }]">★</text>
							</view>
							<view class="review-text">{{ review.content }}</view>
							<view class="review-info">
								<text class="review-category">{{ review.category }}</text>
								<text class="review-date">{{ review.date }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 店铺信息 -->
				<navigator :url="'/pages/store/store?id=' + selectedShop.id" hover-class="navigator-hover">
					<view class="shop-info">
						<view class="shop-info-top">
							<image :src="loadUrl + selectedShop.image" class="shop-image" />
							<view class="shop-summary">
								<view class="shop-name">{{ selectedShop.name }}</view>
								<view class="shop-rating">
									<span>
										<uni-icons v-for="item in selectedShop.rating" type="star-filled" size="30"
											color="#fdd300"></uni-icons>
										<uni-icons v-for="item in (5 - selectedShop.rating)" type="star-filled"
											size="30" color="#c1c0c9"></uni-icons>
									</span>
									<span style="margin-left: 10px;">{{ selectedShop.commentCount }} 评论</span>
								</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</scroll-view>
		<!-- 弹出层组件 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<AddressPanel v-if="popupType === 'address'" @close="closePopup" />
			<ServicePanel v-else-if="popupType === 'service'" @close="closePopup" />
			<SpecifyPanel v-if="popupType === 'specify'" @close="closePopup" />
			<view v-else>
				<view>{{ popupContent }}</view>
				<button @click="closePopup"></button>
			</view>
		</uni-popup>
		<!-- 底部工具栏 -->
		<view class="item arrow" @click="openPopup('', 'specify')">
			<uni-goods-nav class="fixed-goods-nav" :options="options" @click="onClick" :buttons="buttons"
				:safeAreaInsetBottom="safeAreaInsets && safeAreaInsets.bottom" />
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@dcloudio/uni-ui/lib/uni-goods-nav/uni-goods-nav.vue';
	import AddressPanel from './AddressPanel.vue';
	import ServicePanel from './ServicePanel.vue';
	import SpecifyPanel from './SpecifyPanel.vue';

	export default {
		components: {
			uniGoodsNav,
			AddressPanel,
			ServicePanel,
			SpecifyPanel
		},
		data() {
			return {
				selectedShop: {},
				itemId: '',
				popupContent: '',
				popupType: '',
				currentIndex: 0,
				imageUrls: [],
				safeAreaInsets: null,
				isFavorite: false, // 收藏状态
				recommendedItems: [], // 推荐商品列表
				loadUrl: this.$loadUrl,
				product: {
					id: '',
					image: '',
					price: 0,
					status: 0,
					stock: 0,
					storeId: 0,
					title: ''
				},
				options: [{
						icon: 'cart',
						text: '购物车',
						info: 0,
						url: '/pages/shoppingcars/shoppingcars.vue',
						openType: 'switchTab'
					},
					{
						icon: 'star',
						text: '收藏',
						openType: 'contact'
					},
					{
						icon: 'person',
						text: '客服',
						url: '/pages/kefu/kefu.vue'
					}
				],
				buttons: [{
						text: '加入购物车',
						backgroundColor: '#ff976a',
						color: '#fff',
						data: 1
					},
					{
						text: '立即购买',
						backgroundColor: '#27ba9b',
						color: '#fff',
						data: 2
					}
				],
				totalReviews: 68,
				reviews: [{
					username: '布莱恩',
					avatar: '/static/common/3.jpg',
					rating: 4,
					content: '商品收到了，质量不错，商家服务很贴心，送了一些其他赠品，感觉很周到',
					category: '小狗',
					date: '2021-04-01 19:21'
				}]
			}
		},
		mounted() {
			this.itemId = uni.getStorageSync('currentItemId');
			// uni.$once('detail',(id)=>{
			// 	this.itemId=id
			// })
			console.log('当前商品ID:', this.itemId); // 打印商品ID
			this.fetchGoodsDetail();
		},
		methods: {
			goToReviewPage() {
				uni.navigateTo({
					url: '/pages/pinglun/pinglun?'+'itemId='+this.itemId ,// 确保页面路径正确
				});
			},
			openPopup(content, type = '') {
				this.popupContent = content;
				this.popupType = type;
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			changeCurrentIndex(event) {
				this.currentIndex = event.detail.current;
			},
			onClick(e) {
				if (e.index === 1) { // 收藏按钮
					this.isFavorite = !this.isFavorite;
					this.updateFavoriteIcon();
					uni.showToast({
						title: this.isFavorite ? '已收藏' : '取消收藏',
						icon: 'success'
					});
				} else if (e.index === 0) { // 购物车按钮
					uni.switchTab({
						url: '/pages/shoppingcars/shoppingcars'
					});
				} else if (e.index === 2) { // 店铺按钮
					uni.navigateTo({
						url: '/pages/kefu/kefu'
					});
				}
			},
			updateFavoriteIcon() {
				this.options[1].iconPath = this.isFavorite ? 'star-filled' : 'star';
			},
			fetchReviews() {

				// 评价后端
			},
			fetchShopDetail(storeId) {
				this.$service({
					url: '/stores/brief/' + storeId,
					method: 'GET',
				}).then(response => {
					console.log(response); // 打印响应数据
					if (response.code === 0) {
						const data = response.data;
						this.selectedShop = data; // 更新产品详情
						this.imageUrls = data.imageUrls;
						this.loading = false; // 数据加载完成
					} else {
						console.error('获取商店信息失败', response.message);
						uni.showToast({
							title: '获取商店信息失败: ' + response.message,
							icon: 'none'
						});
					}
				}).catch(error => {
					console.error('请求错误', error);
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				});
			},
			fetchGoodsDetail() {
				this.$service({
					url: '/items/' + this.itemId,
					method: 'GET',
				}).then(response => {
					if (response.code === 0) {
						const data = response.data;
						this.product = data; // 更新产品详情
						this.imageUrls = data.imageUrls;
						this.loading = false; // 数据加载完成
						this.fetchShopDetail(data.storeId);
					} else {
						console.error('获取产品详情失败:', response);
					}
				}).catch(error => {
					console.error('获取产品详情时出错:', error);
					this.loading = false;
				});
			},
			fetchRecommendedItems() {
				// 实现获取推荐商品的逻辑
			}
		},
	};
</script>

<style lang="scss">
	.shop-info {
		padding: 20px;
		background-color: #fff;
	}

	.shop-info-top {
		display: flex;
		align-items: center;
	}

	.shop-image {
		width: 100px;
		/* 调整图片宽度 */
		height: 100px;
		/* 调整图片高度 */
		object-fit: cover;
		margin-right: 10px;
		/* 调整图片和文字之间的间距 */
	}

	.shop-summary {
		display: flex;
		flex-direction: column;
	}

	.shop-name {
		font-size: 20px;
		font-weight: bold;
	}

	.shop-rating {
		display: flex;
		align-items: center;
		color: #c1c0c9;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.page {
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.viewport {
		background-color: #f4f4f4;
		flex: 1;
	}

	.fixed-goods-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.panel {
		margin-top: 20rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			line-height: 1;
			padding: 30rpx 60rpx 30rpx 6rpx;
			position: relative;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
				border-left: 4rpx solid #27ba9b;
			}

			navigator {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.arrow {
		&::after {
			position: absolute;
			top: 50%;
			right: 30rpx;
			content: '\e6c2';
			color: #ccc;
			font-family: 'erabbit' !important;
			font-size: 32rpx;
			transform: translateY(-50%);
		}
	}

	/* 商品信息 */
	.goods {
		background-color: #fff;

		.preview {
			height: 550rpx;
			/* 调整轮播图容器高度 */
			position: relative;

			.swiper-item {
				width: 100%;
				height: 100%;
			}

			.indicator {
				position: absolute;
				left: 50%;
				bottom: 20rpx;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				background-color: rgba(0, 0, 0, 0.5);
				transform: translateX(-50%);

				.current,
				.split,
				.total {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

		.meta {
			padding: 30rpx 30rpx 0;

			.price {
				display: flex;
				align-items: flex-end;
				font-size: 36rpx;

				.symbol {
					font-size: 24rpx;
				}

				.number {
					font-weight: 600;
				}
			}

			.name {
				margin: 10rpx 0 0;
				font-size: 40rpx;
				color: #333;
				font-weight: 600;
			}

			.desc {
				margin: 10rpx 0 0;
				font-size: 28rpx;
				color: #aa0000;
			}
		}

		.action {
			.item {
				position: relative;
				display: flex;
				align-items: center;
				height: 100rpx;
				padding: 0 30rpx;
				border-top: 1rpx solid #f4f4f4;

				.label {
					margin-right: 30rpx;
					font-size: 28rpx;
					color: #333;
				}

				.text {
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}

	/* 商品详情 */
	.detail {
		.content {
			padding: 0 30rpx 30rpx;

			.properties {
				.item {
					display: flex;
					align-items: center;
					height: 60rpx;

					.label {
						margin-right: 20rpx;
						font-size: 28rpx;
						color: #333;
					}

					.value {
						font-size: 28rpx;
						color: #666;
					}
				}
			}
		}
	}

	/* 同类推荐 */
	.similar {
		.content {
			padding: 0 30rpx 30rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 30rpx;

			.goods {
				display: flex;
				flex-direction: column;

				.image {
					width: 100%;
					height: 300rpx;
					border-radius: 6rpx;
				}

				.name {
					margin: 10rpx 0 0;
					font-size: 28rpx;
					color: #333;
				}

				.price {
					display: flex;
					align-items: flex-end;
					margin: 6rpx 0 0;
					font-size: 28rpx;

					.symbol {
						font-size: 24rpx;
					}

					.number {
						font-weight: 600;
					}
				}
			}
		}
	}

	.review-container {
		padding: 20rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.review-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.review-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.review-more {
		color: #999999;
	}

	.review-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.review-content {
		flex: 1;
	}

	.review-user {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.review-stars {
		margin-bottom: 10rpx;
	}

	.star {
		color: #cccccc;
	}

	.star.filled {
		color: #ffcc00;
	}

	.review-text {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.review-info {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999999;
	}
</style>